<template>
  <!-- 上边区域 -->
  <div class="newsInfo">
    <div class="title">
      <h3 class="title">{{news.msg}}</h3>
      <div class="sub-title">
        <span>发表时间：{{news.date|dataFor}}</span>
        <span>点击: {{news.clickNum}}次</span>
      </div>
    </div> 
    <hr>  
    <!-- content区域 -->
    <div class="content" >
      <h3>{{news.msg}}</h3>
      <div class="content-con">
        {{content}}
      </div>
    </div>
    <comment></comment>
  </div>
  
</template>
<script>
import comment from '../subcomponents/comment.vue';
var news = JSON.parse(localStorage.getItem('news'));

export default {
  data(){
    return {
      news,
      id: this.$route.params.id,
      content:''
    }
  },
  created(){
    this.news = this.news[this.id-1];
    for(var i=0;i<36;i++){
      this.content += '啦啦啦啦啦啦，我不知道该怎么编'+ this.news.msg;
    }
  },
  methods:{
  },
  components:{
    comment
  }
  
}
</script>
<style lang="scss" scoped>
  .newsInfo {
    padding: 0 4px;
    h3 {
      margin: 10px 0;
      text-align: center;
      font-size: 14px;
      color: red;
    }
    .sub-title {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #226aff;
    }
    .content-con {
      font-size: 12px;
    }
  }
</style>